<template>
    <myx-table

               :showTableSearch="false"
               :showSelection="true"
               :data="data"
               :pageSize="pageSize"
               :total="200"
               :currentPage="currentPage"
               :tableAttr="{ border: true }"
               :column="columns"
               @current-change="pageChange"
               :tableLoading="tableLoading"></myx-table>
</template>
<script setup>

let data = ref([])

let columns = ref([
    {
        key: 'dormintoryName',
        dataIndex: 'dormintoryName',
        align: 'center',
        label: '宿舍名字'
    },
    {
        key: "address",
        dataIndex: 'address',
        label: '地址',
        align: 'center'
    },
    {
        key: 'price',
        dataIndex: 'price',
        label: '住宿价格',
        align: 'center',
        width:150
    },
    {
        key: 'creator',
        label: '登记人',
        dataIndex: 'creator',
        align: 'center',
        width:150
    }
])
let pageSize = ref(12)
let currentPage = ref(1)
let total = ref(0)

let tableLoading = ref(false)

//后台一次生返回来的数据

let totalData = ref([])

//页码发生变化的时候

let pageChange = (currentPage) => {
    data.value = getPageNationData(currentPage, pageSize.value, totalData.value)
    // console.log(data.value)
}

// 本地分页的方法,从数组中一次取多少条数据出来

let getPageNationData = (currentPage, pageSize, data) => {
    //通过slice这个方法在数组中进行截取操作
    if (Array.isArray(data) && data.length > 0) {
        return data.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }
}

let getAttendance = async () => {
    tableLoading.value = true;
    try {
        let res = await api.getDormintoryApi()
        console.log(res)
        tableLoading.value = false
        totalData.value = res.data;
        data.value = getPageNationData(currentPage.value, pageSize.value, res.data)
        total.value = res.data[0].total - 0;

    } catch (e) {
        ElMessage.error(e.toString())
    }
}
onMounted(() => {
    getAttendance()
})
</script>

<script>
export default {
    name: 'dormintory',
    meta: {
        name: "学员宿舍",
        icon: "icon-jianzhu_sushe"
    }
}
</script>